<template>
  <view class="report-container">
    <view class="filter-bar">
      <!-- 左侧：项目筛选器容器 -->
      <view class="filter-container">
        <view class="item">
          <picker mode="selector" :range="projectOptions" @change="handleProjectChange" class="item">请选择项目<image src="/static/arrow_show.svg" class="image1"></image>
          </picker>
        </view>
      </view>

      <!-- 右侧：搜索框容器 -->
      <view class="search-container">
        <view class="item">
          <input class="itme" :value="searchKeyword" @input="onSearchInput" placeholder="查询全部" />
          <image src="/static/x-icon.svg" mode="aspectFit" class="image2"></image>
        </view>
      </view>
    </view>

    <view class="box">
    </view>
    
    <view class="report-list">
      <view class="report-card" v-for="(item, index) in reportData" :key="index" @click="goToDetail(item)">
        <view class="card-header">
          <text class="project-title">{{ item.projectName }}</text>
          <text class="date-tag">{{ item.date }}</text>
        </view>
        <text class="status-text">{{ item.status }}</text>
        <view class="meta-info">
          <view class="submit-info">
            <image class="avatar" src="/static/people.svg"></image>
            <text class="names">{{ item.submitter }} </text>
            <text class="tj">提交</text>
          </view>
          <view class="edit-info">
            <text class="edit">最后编辑于</text>
            <text class="namesend"> {{ item.editor }}</text>
          </view>
        </view>
        
        <view class="luokuan">
          <text class="time-stamp">{{ item.date.replace(/\(.*?\)/g, '').trim() }} {{ item.editTime }}</text>    
        </view>
      </view>
    </view>
	
    <view  class="menu">
		<uni-fab ref="fab" :pattern="pattern" :content="content" :vertical="vertical" 
    	  :direction="direction" :horizontal="horizontal" @trigger="trigger" @fabClick="fabClick" /> 

    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onBackPress } from '@dcloudio/uni-app';
import uniFab from '@/uni_modules/uni-fab/components/uni-fab/uni-fab.vue';


const title = ref('uni-fab');
const directionStr = ref('垂直');
const vertical = ref('bottom'); 
const direction = ref('vertical'); 
const is_color_type = ref(false);
const horizontal = ref('right');

const pattern = ref({
  color: '#7A7E83',
  backgroundColor: '#fff',
  selectedColor: '#55aaff',
  buttonColor: '#55aaff',
  icon: 'closeempty'
});

const content = ref([{
  iconPath: '/static/day-report.svg', 
  SelectedIconPath: '/static/x-bottom.svg', 
  text: '新建日报',
  active: false
}]);

const goToDetail = (item) => {
  uni.navigateTo({
    url: `/pages/allreport/daily-details?schoolName=${encodeURIComponent(item.projectName)}&reportDate=${item.date.replace(/\(.*?\)/g, '').trim()}&waterMeterRemark=${item.status}`,
  });
};

const projectOptions = ref([
  "全部项目",
  "钦州幼儿师范高等专科学校",
  "玉林实验中学",
  "广西现代职业技术学院",
  "广西机电工程学校",
  "广西医科大学",
  "南宁理工学院",
  "明阳中学"
]);

const currentProject = ref(''); 
const searchKeyword = ref('');
const reportData = ref([
  {
	id:1,
    projectName: "钦州幼儿师范高等专科学校",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "李建豪",
    editor: "李建豪",
    editTime: "9:54:56"
  },
  {
	id:2,
    projectName: "玉林实验中学",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "饶碧源",
    editor: "饶碧源",
    editTime: "08:59:17"
  },
  {
	id:3,
    projectName: "广西现代职业技术学院",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "施盛旺",
    editor: "施盛旺",
    editTime: "10:06:47"
  },
  {
	id:4,
    projectName: "广西机电工程学校",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "涂富刚",
    editor: "涂富刚",
    editTime: "10:20:30"
  },
  {
	id:5,
    projectName: "广西医科大学",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "涂富刚",
    editor: "涂富刚",
    editTime: "09:20:30"
  },
  {
	id:6,
    projectName: "南宁理工学院",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "饶碧源",
    editor: "饶碧源",
    editTime: "08:59:17"
  },
  {
	id:7,
    projectName: "明阳中学",
    date: "2025-06-10 (周二)",
    status: "继续观察",
    submitter: "施盛旺",
    editor: "施盛旺",
    editTime: "13:06:47"
  }
]);

const switchBtn = (hor, ver) => {
  if (hor === 0) {
    direction.value = direction.value === 'horizontal' ? 'vertical' : 'horizontal';
    directionStr.value = direction.value === 'horizontal' ? '垂直' : '水平';
  } else {
    horizontal.value = hor;
    vertical.value = ver;
  }
};

const switchColor = () => {
  is_color_type.value = !is_color_type.value;
  pattern.value = {
    ...pattern.value,
    iconColor: is_color_type.value ? '#aaa' : '#fff',
    buttonColor: is_color_type.value ? '#fff' : '#007AFF'
  };
};

const handleProjectChange = (e) => {
  currentProject.value = projectOptions.value[e.detail.value];
};

const onSearchInput = (e) => {
  searchKeyword.value = e.detail.value;
};

const clearSearch = () => {
  searchKeyword.value = '';
};

onBackPress(() => {
  if (fab.value?.isShow) {
    fab.value.close()
    return true
  }
  return false
});
</script>


<style lang="scss" scoped>
.report-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-size: 14px;

	.box{
		height: 60px;
	}
  // 导航栏
  .navbar {
    display: flex;
    align-items: center;
    height: 44px;
    background-color: #fff;
    padding: 0 16px;
    border-bottom: 1px solid #eee;

    .back-btn {
      font-size: 20px;
      color: #333;
      margin-right: 8px;
      cursor: pointer;
    }

    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333;
    }
  }

  // 筛选栏
 .report-container {
   background-color: #f5f5f5;
   min-height: 100vh;
   font-size: 14px;
 }
 
 /* 筛选栏样式 */
 .filter-bar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16rpx;
   border-radius: 8px;
   background-color: #fff;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   justify-content: space-between;
   box-sizing: border-box; 
   position: fixed;
   width: 100%;
	 
   .filter-container,
   .search-container {
	flex-shrink: 0; 
     width: 48%;
     display: flex;
	 height: 36px;
     align-items: center;
     border: 1px solid #e3e3e3;
     border-radius: 50px;
     box-sizing: border-box;
     overflow: hidden;  
	 margin-bottom: 8px;
	 padding: 10px;
	 background-color: #f4f4f4;
	
	
	  .item{
		  display: flex;
		  color: #333;
		  font-size: 16px;
		  .image1{
			  width: 24px;
			  height: 24px;
			  border-radius: 50%;
			  margin-right: 6px;
			  position: absolute;
			  margin-left: 72px;
		  }  
		  .image2{
			  width: 24px;
			  height: 24px;
			  border-radius: 50%;
			  margin-right: 6px;
		  }
	  }
   }
 
   .search-input {
     width: 100%;
     padding: 8px 12px;
     border: none;
     outline: none;
     color: #333;
     font-size: 24px;
   }
 
   .search-clear {
     margin-right: 8px;
     color: #999;
     cursor: pointer;
   }
 }

  // 日报列表
  .report-list {
    padding: 10px;
	
    .report-card {
      background-color: #fff;
      border-radius: 8px;
      padding: 16px;
      margin-bottom: 10px;

      .card-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 8px;

        .project-title {
          font-size: 16px;
          font-weight: bold;
          color: #333;
        }

        .date-tag {
          font-size: 16px;
          color: #666;
        }
      }

      .status-text {
        font-size: 16px;
        color: #666;
		font-weight: bold;
        margin-bottom: 8rpx;
        display: block;
		font-weight: normal;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #f4f4f4; 
      }

      .meta-info {
          display: flex;
          justify-content: space-between; 
          align-items: flex-end; 
		.submit-info{
			margin-top: 16rpx;
		}
		.edit-info{
			display: flex;
			justify-content: space-between; 
			.names{
				font-size: 28rpx;
				font-weight:bold;
				color: #333;
			}
			.namesend{
				font-size: 24rpx;
				font-weight:bold;
				margin-left: 8rpx;
				color: #888;
			}
			.edit{
				font-size: 24rpx;
				font-weight:normal;
				color: #999;
			}
		}
        .submit-info{
          display: flex;
          align-items: center;
		  
			.names{
				font-size: 28rpx;
				font-weight:bold;
				color: #333;
			}
			.namesend{
				font-size: 24rpx;
				font-weight:bold;
				color: #888;
			}
			.edit{
				font-size: 24rpx;
				font-weight:normal;
				color: #999;
			}
			.tj{
				font-size: 24rpx;
				font-weight:bold;
				color: #555;
			}
          .avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            margin-right: 6px;
          }

          text {
            color: #999;
            margin-right: 12px;
          }
		}
	}
		.luokuan{
		  display: flex;
		   justify-content: flex-end;
		.time-stamp {
			font-size: 24rpx;
			font-weight:normal;
			color: #999;
			position: right;
			}
		  .date-tag {
			font-size: 12px;
			color: #666;
		  }
      }
    }
}
    .empty-tip {
      text-align: center;
      padding: 20px;
      color: #999;
    }
  }

.container {
  background-color: #f5f5f5;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
  font-family: "Gill Sans", sans-serif;
}
</style>